<template>
	<view class="login-container">
		<view class="login-card">
			<view class="title">
				注册
			</view>
			<view class="row">
				<view class="">
					用户名：
				</view>
				<input type="text" v-model="formData.username" />
			</view>
			<view class="row">
				<view class="">
					密码：
				</view>
				<input type="password" v-model="formData.password" />
			</view>
			<view class="row">
				<view class="">
					邮箱：
				</view>
				<input type="text" v-model="formData.email" />
			</view>
			<view class="row">
				<input type="text" v-model="formData.mailCode" placeholder="邮箱验证码" />
				<VerificationCode :email="formData.email" @transmitcode="getCode"></VerificationCode>
			</view>
			<button @click="register">注册</button>
			<view class="a" @click.prevent="goLogin">登陆</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	const formData = ref({
		username: '',
		password: '',
		email: '',
		mailCode: ''
	});
	// 真实验证码
	const trueCode = ref('');

	const goLogin = () => {
		uni.navigateTo({ url: '/pages/login/login' });
	};

	const getCode = code => {
		trueCode.value = code;
	};

	const register = () => {
		// 进行表单验证
		if (!formData.value.username || !formData.value.password ||
			!formData.value.email || !formData.value.mailCode) {
			uni.showToast({
				title: '请填写所有内容',
				icon: 'error'
			});
			return;
		}
		// 判断验证码
		if (+trueCode.value !== +formData.value.mailCode) {
			uni.showToast({
				title: '验证码错误',
				icon: 'error'
			});
			return;
		}
		// 判断用户名密码是否符合规范
		if (formData.value.username.length < 3 || formData.value.username.length > 10) {
			uni.showToast({
				title: '用户名长度为3-10位',
				icon: 'error'
			});
			return;
		}
		if (formData.value.password.length < 6 || formData.value.password.length > 20) {
			uni.showToast({
				title: '密码长度为6-20位',
				icon: 'error'
			});
			return;
		}
		// 注册云函数
		uniCloud.callFunction({
			name: 'register',
			data: formData.value,
			success(res) {
				uni.showToast({
					title: res.result.msg,
					icon: 'success'
				});
				if (res.result.code === 0) {
					uni.navigateTo({ url: '/pages/login/login' });
				}
			}
		});
	};
</script>

<style scoped lang="scss">
	.login-container {
		width: 100%;
		height: 100vh;
		position: relative;
		background-color: #fff;
		overflow: hidden;
		background: url("https://mp-15ab7795-d8b1-4b2f-a41e-493ce57cc1e7.cdn.bspapp.com/images/glass.png") 50% 50% no-repeat;
		background-size: cover;

		.title {
			font-size: 60rpx;
			font-weight: 700;
			text-align: center;
			margin-bottom: 60rpx;
			color: pink;
		}

		.login-card {
			width: 600rpx;
			height: 1100rpx;
			background-color: #fff;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			padding: 50rpx;
			box-sizing: border-box;
			border-radius: 20rpx;
			box-shadow: 0 0 10rpx 4rpx #ccc;

			.row {
				display: flex;
				justify-content: space-between;
				margin-bottom: 40rpx;

				view {
					height: 80rpx;
					line-height: 80rpx;
					font-size: 36rpx;
				}

				input {
					width: 340rpx;
					height: 80rpx;
					line-height: 80rpx;
					border: 2px solid #ccc;
					border-radius: 20rpx;
				}

			}

			button {
				width: 400rpx;
				height: 100rpx;
				line-height: 100rpx;
				background-color: pink;
				color: #fff;
				border-radius: 20rpx;
			}

			.a {
				width: 400rpx;
				height: 100rpx;
				line-height: 100rpx;
				margin: 0 auto;
				color: #007aff;
				margin-top: 20rpx;
				display: block;
				text-align: center;
				font-size: 32rpx;
			}
		}
	}
</style>